<template>
  <div :class="['page-cinema-movie', { stop: isScroll }]">
    <div class="page-header">
      <div @click="back" class="page-header-left">
        <span class="page-header-back"></span>
      </div>
      <div class="page-header-title line-ellipsis" v-if="movieinfo">
        {{ movieinfo.nm }}
      </div>
      <div class="page-header-right">
        <div class="nav-btn">
          <img src="../assets/images/nav-button.png" alt="" class="nav-icon" />
        </div>
      </div>
    </div>
    <div class="movie-wrapper">
      <div class="movie-detail" v-if="movieinfo">
        <div class="mask"></div>
        <div
          class="poster-bg"
          :style="{ 'background-image': 'url(' + movieinfo.img + ')' }"
        ></div>
        <div class="detail">
          <div class="poster">
            <img :src="movieinfo.img" alt="" class="poster-img" />
          </div>
          <div class="content">
            <div class="title line-ellipsis">{{ movieinfo.nm }}</div>
            <div class="public line-ellipsis">{{ movieinfo.enm }}</div>
            <div class="score line-ellipsis">
              <span>{{ movieinfo.sc == 0 ? "暂无评分" : movieinfo.sc }}</span>
              <span class="sum">({{ playCountNum(movieinfo.snum) }}人评)</span>
            </div>
            <div class="type line-ellipsis">
              <span>{{ movieinfo.cat }}</span>
              <div class="type-img" v-if="movieinfo.ver">
                <div class="imax icon-bg"></div>
              </div>
            </div>
            <div class="public line-ellipsis">
              {{ movieinfo.src }}/{{ movieinfo.dur }}分钟
            </div>
            <div class="public line-ellipsis">{{ movieinfo.pubDesc }}</div>
          </div>
        </div>
        <div class="movie-detail-arrow">
          <span class="arrow-bg"></span>
        </div>
      </div>
      <div class="select-sticky">
        <div class="show-warp">
          <div class="show-days" v-if="datelist">
            <div
              :class="['day', { chosen: navIndex == index }]"
              v-for="(item, index) in datelist"
              :key="index"
              @click="selectNav(index, item.date)"
            >
              <span>{{ navTime(item.date) }}</span>
            </div>
          </div>
        </div>
        <div class="nav-wrap">
          <div class="filter-nav">
            <div class="tab" ref="tab">
              <div
                :class="['item', 'line-ellipsis', { chosen: type == 1 }]"
                @click="select(1)"
              >
                <i>全城</i>
                <span class="drop"></span>
              </div>
              <div
                :class="['item', 'line-ellipsis', { chosen: type == 2 }]"
                @click="select(2)"
              >
                <i>品牌</i>
                <span class="drop"></span>
              </div>
              <div
                :class="['item', 'line-ellipsis', { chosen: type == 3 }]"
                @click="select(3)"
              >
                <i>筛选</i><i ref="little"></i>
                <span class="drop"></span>
              </div>
            </div>
            <div class="close-tab">
              <div class="tab-content">
                <div class="page region" v-if="type == 1">
                  <div class="region-tab">
                    <ul class="tablist">
                      <li
                        :class="['item', { chosen: showTab == index }]"
                        @click="showTab = index"
                        v-for="(item, index) in alltype"
                        :key="index"
                      >
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                  <div class="region-list">
                    <div class="region-sidenav">
                      <div class="district" v-if="showTab == 0">
                        <div
                          :class="[
                            'district-li',
                            'item',
                            { chosen: showTab1 == index },
                          ]"
                          @click="selectRegion(item.id)"
                          v-for="(item, index) in districtLeft"
                          :key="index"
                        >
                          {{ item.name }}({{ item.count }})
                        </div>
                      </div>
                      <div class="subway" v-if="showTab == 1">
                        <div
                          :class="[
                            'district-li',
                            'item',
                            { chosen: showTab6 == index },
                          ]"
                          @click="selectline(item.id)"
                          v-for="(item, index) in subway"
                          :key="index"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                    <div class="region-list-item">
                      <div class="filter-list" v-if="showTab == 0">
                        <div
                          :class="['item', { chosen: showTab2 == index }]"
                          @click="checkItem(item.id, index, item.name)"
                          v-for="(item, index) in districtRight"
                          :key="index"
                        >
                          <span class="item-name">{{ item.name }}</span>
                          <span class="item-count">{{ item.count }}</span>
                        </div>
                      </div>
                      <div class="filter-list" v-if="showTab == 1">
                        <div
                          :class="['item', { chosen: showTab2 == index }]"
                          @click="checklineItem(item.id, index, item.name)"
                          v-for="(item, index) in subwayItem"
                          :key="index"
                        >
                          <span class="item-name">{{ item.name }}</span>
                          <span class="item-count">{{ item.count }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="page brand" v-if="type == 2">
                  <div class="brand-content">
                    <div
                      :class="[
                        'item',
                        'brand-list',
                        { chosen: showTab3 == index },
                      ]"
                      @click="checkBrand(item.id, index, item.name)"
                      v-for="(item, index) in brand"
                      :key="index"
                    >
                      <div class="brand-name">{{ item.name }}</div>
                      <div class="brand-count">{{ item.count }}</div>
                    </div>
                  </div>
                </div>
                <div class="page special" v-if="type == 3">
                  <div id="special-content">
                    <div class="item-title">影院服务</div>
                    <div class="item-list">
                      <div
                        :class="['item', { chosen: showTab4 == index }]"
                        @click="checkService(item.id, index, item.name)"
                        v-for="(item, index) in service"
                        :key="index"
                      >
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                  <div id="special-btn">
                    <span class="btn" id="cancel-btn" @click="reset">重置</span>
                    <span class="btn" id="confirm-btn" @click="sure">确定</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-loading size="24px" v-if="showloading">加载中...</van-loading>
      <div class="cinema-wrap" v-if="!nothing">
        <div class="list-wrap" v-if="!showloading">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <div
              class="item"
              v-for="(item, index) in cinemalist"
              :key="index"
              @click="godetail(item.id)"
            >
              <div class="title-wrap">
                <div class="title-block">
                  <div class="title line-ellipsis">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="price-block">
                    <span class="price">{{ item.sellPrice }}</span>
                    <span class="q">元起</span>
                  </div>
                </div>
                <div class="location-block">
                  <div class="line-ellipsis">{{ item.addr }}</div>
                  <div class="distance">{{ item.distance }}</div>
                </div>
                <div class="label-block" v-if="item.labels.length != 0">
                  <div
                    :style="[{ color: k.color }, { 'border-color': k.color }]"
                    v-for="(k, i) in item.labels"
                    :key="i"
                  >
                    {{ k.name }}
                  </div>
                </div>
                <div
                  class="discount-block"
                  v-if="item.promotion.cardPromotionTag != ''"
                >
                  <div class="discount">
                    <div class="discount-label cardPromotionTag"></div>
                    <div class="discount-label-text">
                      {{ item.promotion.cardPromotionTag }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="recent">
                <span class="time-line">{{ item.showTimes }}</span>
                <!-- <span class="time-line after"> 19:40</span> -->
              </div>
            </div>
            <div class="lodaing" v-if="showloading">
              <div class="img">
                <img class="img1" src="../assets/images/maoyan01.png" alt="" />
                <img class="img2" src="../assets/images/maoyan02.png" alt="" />
              </div>
            </div>
          </van-list>
        </div>
      </div>
      <div class="nothing" v-if="nothing">
        <img src="../assets/images/nothing.png" alt="" />
      </div>
      <div class="lodaing" v-if="showView">
            <div class="img">
              <img class="img1" src="../assets/images/maoyan01.png" alt="" />
              <img class="img2" src="../assets/images/maoyan02.png" alt="" />
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {
  getShowdays,
  getMovieIntro,
  getSelectDetail,
  getSelectCinemas,
} from "../api/movie.js";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    let isScroll = ref(false);
    let navIndex = ref(0);
    let type = ref(0);
    let showTab = ref(0);
    let showTab1 = ref(0);
    let showTab2 = ref(0);
    let showTab3 = ref(0);
    let showTab4 = ref(0);
    let showTab5 = ref(0);
    let showTab6 = ref(0);
    let alltype = ref(["商区", "地铁站"]);
    let datelist = ref(null); //放映时间
    let movieinfo = ref(null); //电影售卖信息
    let currentDate = ref(null); //当前时间
    let limitnum = ref(10); //限制列表加载长度
    let offset = ref(10); //分页偏移
    let cityId = ref(null); //城市id
    let cinemalist = ref([]); //影院筛选结果
    let loading = ref(false); //加载动画
    let finished = ref(false);
    let showloading = ref(false);
    let tabloading = ref(false)
    let nothing = ref(false);
    //行政区
    let districtLeft = ref(null); //行政区数据
    let districtRight = ref(null); //行政区下级数据
    let districtId = ref(-1); //行政区id
    let areaId = ref(-1); //商圈
    let subway = ref(null); //地铁
    let subwayItem = ref(null);
    let lineId = ref(-1);
    let stationId = ref(-1);
    let brand = ref(null); //品牌
    let brandIds = ref(-1); //品牌id
    let service = ref(null); //服务
    let serviceId = ref(-1);
    let tab = ref(null);

    let showView = ref(true)

    let select = (value) => {
      isScroll.value = !isScroll.value;
      type.value = type.value == value ? null : value;
    };
    //获取影片上映日期
    let getShowDateFun = (movieId, cityId) => {
      getShowdays({ movieId, cityId }).then((data) => {
        if (data) {
         datelist.value = data.data.dates;
         currentDate.value=datelist.value[0].date
         
         getMovieInfoFun(route.query.movieId);
         getCinemaTypeFun(
            route.query.movieId,
            route.query.cityId,
            currentDate.value
          );
          getCinemasListFun(currentDate.value);
          }
      });
    };
    //获取影片信息
    let getMovieInfoFun = (movieId) => {
      getMovieIntro({ movieId }).then((data) => {
        if (data) {
          setTimeout(() => {
            showView.value=false
          }, 500);
        }
        movieinfo.value = data.data.movie;
      });
    };
    //获取影院筛选条件
    let getCinemaTypeFun = (movieid, cityId, showDate) => {
      getSelectDetail({ movieid, cityId, showDate }).then((data) => {
        // console.log(data);
        districtLeft.value = data.data.district.subItems; //行政区列表
        subway.value = data.data.subway.subItems; //地铁列表
        brand.value = data.data.brand.subItems; //品牌列表
        service.value = data.data.service.subItems; //服务列表
      });
    };
    //获取影院筛选结果  limit offset showDate movieId cityId districtId lineId areaId stationId brandIds serviceIds
    let getCinemasListFun = (date) => {
      (cinemalist.value = []), (offset.value = 0);
      
      getSelectCinemas({
        showDate: date,
        cityId: route.query.cityId,
        movieId: route.query.movieId,
        offset: offset.value,
        limit: limitnum.value,
        districtId: districtId.value,
        areaId: areaId.value,
        brandId: brandIds.value,
        serviceId: serviceId.value,
        lineId: lineId.value,
        stationId: stationId.value,
      }).then((data) => {
        if (data.data.cinemas.length == 0 || data.data.cinemas.length < 10) {
          finished.value = true;
        }
        if (data.data.cinemas.length >= 10) {
          finished.value = false;
        }
        if (data.data.cinemas.length == 0) {
          setTimeout(()=>{
            nothing.value = true;
          },500)
        } else {
          nothing.value = false;
        }
        cinemalist.value = data.data.cinemas;
        offset.value = 10;
        setTimeout(() => {
          showloading.value = false;
        }, 400);
      });
    };
    //加载数据
    let getCinemaList = () => {
      loading.value = true;
      isScroll.value = true;
      getSelectCinemas({
        showDate: currentDate.value,
        cityId: route.query.cityId,
        movieId: route.query.movieId,
        offset: offset.value,
        limit: limitnum.value,
        districtId: districtId.value,
        areaId: areaId.value,
        brandId: brandIds.value,
        serviceId: serviceId.value,
        lineId: lineId.value,
        stationId: stationId.value,
      }).then((data) => {
        // console.log(data);
        cinemalist.value = [...cinemalist.value, ...data.data.cinemas];
        if (cinemalist.value.length < 10) {
          loading.value = false;
          isScroll.value = false;
          finished.value = true;
        }
        setTimeout(() => {
          loading.value = false;
          isScroll.value = false;
        }, 500);
      });
      offset.value += 10;
      if (offset.value >= 60) {
        finished.value = true;
      }
    };
    let onLoad = () => {
      getCinemaList();
    };
    //选择日期
    let selectNav = (index, value) => {
      navIndex.value = index;
      currentDate.value = value;
      showloading.value = true;
      nothing.value=false
  
      // console.log(currentDate);
      getCinemasListFun(currentDate.value);
    };

    //商区
    let selectRegion = (id) => {
      let index = districtLeft.value.findIndex((item) => item.id == id);
      showTab1.value = index;
      showTab2.value = 0;
      districtRight.value = districtLeft.value[index].subItems;

      //获取行政区id
      districtId.value = id;
      if (id == -1) {
        areaId.value = id;
        showTab2.value = 0;
        type.value = null;

        getCinemasListFun(currentDate.value);
        tab.value.getElementsByTagName("i")[0].innerText = "全城";
      }
    };
    //商区下级列表
    let checkItem = (id, i, name) => {
      isScroll.value = false;
      showTab2.value = i;
      //获取区域id
      areaId.value = id;
      lineId.value = -1;
      stationId.value = -1;
      if (id == -1) {
        getCinemasListFun(currentDate.value);
        tab.value.getElementsByTagName("i")[0].innerText =
          districtLeft.value[showTab1.value].name;
      } else {
        tab.value.getElementsByTagName("i")[0].innerText = name;
      }
      getCinemasListFun(currentDate.value);
      type.value = null;
    };
    //地铁
    let selectline = (id) => {
      let index = subway.value.findIndex((item) => item.id == id);
      showTab6.value = index;
      showTab2.value = 0;
      lineId.value = id;
      subwayItem.value = subway.value[index].subItems;
      if (id == -1) {
        areaId.value = id;
        showTab2.value = 0;
        type.value = null;

        getCinemasListFun(currentDate.value);
        tab.value.getElementsByTagName("i")[0].innerText = "全城";
      }
    };
    let checklineItem = (id, i, name) => {
      isScroll.value = false;
      showTab2.value = i;
      //获取区域id
      areaId.value = -1;
      districtId.value = -1;
      stationId.value = id;
      if (id == -1) {
        getCinemasListFun(currentDate.value);
        tab.value.getElementsByTagName("i")[0].innerText =
          districtLeft.value[showTab1.value].name;
      } else {
        tab.value.getElementsByTagName("i")[0].innerText = name;
      }
      type.value = null;
    };
    //品牌
    let checkBrand = (id, index, name) => {
      isScroll.value = false;
      showTab3.value = index;
      brandIds.value = id;
      tab.value.getElementsByTagName("i")[1].innerText = name;
      type.value = null;

      getCinemasListFun(currentDate.value);
    };
    //服务
    let checkService = (id, index, name) => {
      isScroll.value = false;
      showTab4.value = index;
      serviceId.value = id;
      if (id == -1) {
        tab.value.getElementsByTagName("i")[2].innerText = "筛选";
      } else {
        tab.value.getElementsByTagName("i")[2].innerText = `${name}`;
      }

      getCinemasListFun(currentDate.value);
    };
    //重置
    let reset = () => {
      isScroll.value = false;
      serviceId.value = -1;
      type.value = null;

     getCinemasListFun(currentDate.value);
    };
    //确定
    let sure = () => {
      type.value = null;
      isScroll.value = false;
    };
    //跳转影片购买页面
    let godetail = (id) => {
      // console.log(id);
   
        router.push({ path: "/cinemadetail", query: { id, ci: route.query.cityId,movieId:route.query.movieId } });
      
    };

    //导航时间
    let navTime = (value) => {
      let dates = value;
      let datesar = dates.split("-");
      let date = new Date();
      let datewl = new Date(datesar[0], String(datesar[1] - 1), datesar[2]);
      let datewls = datewl.getDay();

      let datesl = date.getDate();
      if (datesar[2] == datesl) {
        return "今天" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datesar[2] == Number(datesl) + 1) {
        return "明天" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datesar[2] == Number(datesl) + 2) {
        return "后天" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 1) {
        return "星期一" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 2) {
        return "星期二" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 3) {
        return "星期三" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 4) {
        return "星期四" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 5) {
        return "星期五" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 6) {
        return "星期六" + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 0) {
        return "星期日" + datesar[1] + "月" + datesar[2] + "日";
      }
    };
    //过滤评论人数
    let playCountNum = (value) => {
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";

      return y;
    };
    // 返回
    let back = () => {
      router.go(-1);
    };
    cityId.value = route.query.cityId;
    // getCurrentDate();
    getShowDateFun(route.query.movieId, route.query.cityId);

    return {
      back,
      onLoad,
      selectNav,
      selectRegion,
      checkItem,
      selectline,
      checklineItem,
      checkBrand,
      godetail,
      sure,
      checkService,
      reset,
      isScroll,
      navIndex,
      type,
      showTab,
      showTab1,
      showTab2,
      showTab3,
      showTab4,
      showTab5,
      showTab6,
      alltype,
      datelist, //放映时间
      movieinfo, //电影售卖信息
      currentDate, //当前时间
      limitnum, //限制列表加载长度
      offset, //分页偏移
      cityId, //城市id
      cinemalist, //影院筛选结果
      loading, //加载动画
      finished,
      showloading,
      showView,
      nothing,
      //行政区
      districtLeft, //行政区数据
      districtRight, //行政区下级数据
      districtId, //行政区id
      areaId, //商圈
      subway, //地铁
      subwayItem,
      lineId,
      stationId,
      brand, //品牌
      brandIds, //品牌id
      service, //服务
      serviceId,
      tab,
      select,
      getShowDateFun,
      getMovieInfoFun,
      playCountNum,
      navTime,
      tabloading,
    };
  },
};
</script>

<style lang="less" scoped>
.page-cinema-movie {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .page-header {
    display: flex;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #e54848;

    .page-header-left {
      width: 50px;
      height: 100%;
      line-height: 50px;

      .page-header-back {
        display: inline-flex;
        position: relative;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-bottom: 2px solid #fff;
          border-left: 2px solid #fff;
          transform: rotate(45deg);
        }
      }
    }
    .page-header-title {
      flex: 1;
      line-height: 50px;
      font-size: 18px;
      font-weight: 400;
    }
    .page-header-right {
      position: relative;
      display: flex;
      align-items: center;
      width: 50px;
      height: 100%;
      line-height: 50px;

      .nav-btn {
        flex: 1;
        text-align: right;
        margin-right: 6px;

        .nav-icon {
          display: inline-block;
          width: 17px;
          height: 16px;
        }
      }
    }
  }
  .movie-wrapper {
    .movie-detail {
      position: relative;
      height: 188px;
      font-size: 12px;
      overflow: hidden;
      cursor: pointer;

      .mask {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #333;
      }
      .poster-bg {
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        position: absolute;
        background-image: url(https://p0.pipi.cn/mmdb/25bfd651ecd2ff8ea3f2aa9ff5f49e1ff99b6.jpg?imageMogr2/thumbnail/2500x2500%3E);
        filter: blur(60px);
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.55;
      }
      .detail {
        display: flex;
        padding: 19px 30px 19px 15px;
        height: 150px;

        .poster {
          width: 110px;
          height: 150px;
          background: url("../assets/images/bg.fbcd24ee.png");
          background-size: 100% 100%;

          .poster-img {
            width: 110px;
            height: 150px;
          }
        }
        .content {
          overflow-x: hidden;
          margin-left: 12.5px;
          line-height: 1;
          color: #fff;

          .title {
            font-size: 20px;
            margin-top: 2px;
            font-weight: 700;
            overflow: hidden;
          }
          .public {
            margin-top: 10px;
            opacity: 0.8;
          }
          .score {
            margin-top: 11px;
            font-size: 18px;
            font-weight: 700;
            color: #fc0;

            .sum {
              display: inline-block;
              margin-left: 5px;
              font-size: 12px;
              color: #fff;
              opacity: 0.8;
            }
          }
          .type {
            margin-top: 10px;
            opacity: 0.8;

            .type-img {
              display: inline-block;
              margin-left: 5px;
              width: 42px;
              height: 13px;
              vertical-align: top;
              opacity: 0.85;

              .imax {
                width: 26px;
                background: url("../assets/images/IMAX.png");
                background-size: 100% 100%;
              }
              .icon-bg {
                display: block;
                height: 100%;
              }
            }
          }
        }
      }
      .movie-detail-arrow {
        position: absolute;
        width: 10px;
        height: 14.6px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);

        .arrow-bg {
          display: block;
          width: 100%;
          height: 100%;
          background: url("../assets/images/arrow-right2222.png");
          background-size: cover;
        }
      }
    }
    .select-sticky {
      position: sticky;
      background-color: #fff;
      top: -1px;
      width: 100%;
      z-index: 2;

      .show-warp {
        height: 45px;

        .show-days {
          position: relative;
          display: flex;
          width: 100%;
          height: 45px;
          background-color: #fff;
          overflow-x: auto;
          z-index: 11;

          .day {
            flex: none;
            min-width: 115px;
            line-height: 43px;
            margin-left: 4.5px;
            font-size: 14px;
            text-align: center;
            color: #666;
          }
          .chosen {
            border-bottom: 2px solid #f03d37;
            color: #f03d37;
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
      .nav-wrap {
        .filter-nav {
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #fff;
          z-index: 11;

          .tab {
            display: flex;
            height: 100%;

            &::before {
              content: " ";
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: #e5e5e5;
              transform: scaleY(0.5);
            }
            &::after {
              content: " ";
              display: block;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: #e5e5e5;
              transform: scaleY(0.5);
            }

            .item {
              flex: 1;
              position: relative;
              text-align: center;
              font-size: 13px;
              line-height: 40px;
              color: #666;

              .drop {
                display: inline-block;
                position: absolute;
                top: 18px;
                width: 0;
                height: 0;
                margin-left: 4px;
                border: 4px solid transparent;
                border-top-color: #b0ada8;
              }
            }
            .chosen {
              color: #dd403b;
              .drop {
                border-bottom-color: #dd403b;
                border-top-color: transparent;
                top: 14px;
              }
            }
          }
          .close-tab {
            position: relative;
            width: 100%;
            background: #fff;
            z-index: 100;
            overflow: scroll;

            .tab-content {
              .page {
                background-color: #fff;
                overflow: auto;
                z-index: 999;

                .region-tab {
                  height: 44px;

                  .tablist {
                    display: flex;
                    width: 90%;

                    .item {
                      position: relative;
                      display: inline-block;
                      padding: 0 10px;
                      width: 50%;
                      height: 100%;
                      line-height: 44px;
                      text-align: center;
                    }
                    .chosen {
                      color: #f03d37;

                      &::after {
                        content: "";
                        position: absolute;
                        display: block;
                        bottom: 0;
                        left: 0;
                        width: 90%;
                        border-top: 2px solid #f03d37;
                      }
                    }
                  }
                }
                .region-list {
                  background: #f5f5f5;
                  height: 300px;

                  .region-sidenav {
                    width: 35%;
                    height: 100%;
                    float: left;
                    overflow: scroll;

                    .subway,
                    .district {
                      min-height: 100%;
                      background: #fff;

                      .district-li {
                        height: 44px;
                        padding-left: 10px;
                        line-height: 44px;
                        font-size: 14px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      }
                      .chosen {
                        color: #f03d37;
                        background-color: #f5f5f5;
                      }
                    }
                    &::-webkit-scrollbar {
                      display: none;
                    }
                  }
                  .region-list-item {
                    width: 65%;
                    height: 100%;
                    float: right;
                    overflow: scroll;

                    .filter-list {
                      background-color: #f5f5f5;

                      .item {
                        position: relative;
                        height: 45px;
                        line-height: 45px;
                        padding: 0 0 0 25px;

                        .item-name {
                          display: inline-block;
                          width: 80%;
                          font-size: 14px;
                          color: #333;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          overflow: hidden;
                        }
                        .item-count {
                          float: right;
                          width: 20px;
                          margin-right: 10px;
                          color: #8f9296;
                          font-size: 12px;
                          text-align: right;
                        }
                      }
                      .chosen {
                        color: #f03d37;

                        .item-name {
                          color: #f03d37;
                        }
                        .item-count {
                          color: #f03d37;
                        }
                        ::before {
                          content: "";
                          display: block;
                          position: absolute;
                          left: 8px;
                          top: 19px;
                          width: 11.5px;
                          height: 8px;
                          background-image: url("../assets/images/chosen.png");
                          background-repeat: no-repeat;
                          background-size: 100% 100%;
                        }
                      }
                    }
                    &::-webkit-scrollbar {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .brand {
        min-height: 150px;
        max-height: 352px;

        .brand-content {
          .brand-list {
            position: relative;
            line-height: 44px;
            height: 44px;
            padding: 0 15px 0 26px;
            border-bottom: 1px solid #e5e5e5;
            color: #333;

            .brand-name {
              display: inline-block;
              width: 49%;
            }
            .brand-count {
              display: inline-block;
              width: 49%;
              text-align: right;
              color: #8f9296;
              font-size: 12px;
            }
          }
          .chosen {
            color: #f03d37;
            .brand-name {
              color: #f03d37;
            }
            .brand-count {
              color: #f03d37;
            }
            ::after {
              content: "";
              display: block;
              position: absolute;
              left: 8px;
              top: 19px;
              width: 11.5px;
              height: 8px;
              background-image: url("../assets/images/chosen.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .special {
        min-height: 208px;
        overflow: hidden;

        #special-content {
          min-height: 150px;
          max-height: 270px;
          overflow: scroll;

          .item-title {
            margin-left: 12px;
            margin-top: 11px;
            font-size: 15px;
          }
          .item-list {
            margin: 0 12px 12px 12px;

            .item {
              float: left;
              width: 21.3%;
              height: 30px;
              padding: 3px 0;
              margin-right: 3%;
              margin-top: 10px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              border: 1px solid #ccc;
              border-radius: 5px;
              font-size: 9.8px;
            }
            .chosen {
              background: #fcf0f0;
              color: #f03d37;
              border: 1px solid #f03d37;
            }
            &::after {
              display: block;
              clear: both;
              content: "";
            }
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
        #special-btn {
          height: 60px;
          width: 100%;
          border-top: 1px solid #e5e5e5;
          margin-top: 10px;
          background: #fafafa;
          .btn {
            display: inline-block;
            height: 34px;
            width: 21.3%;
            margin: 13px 11px;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            text-align: center;
            line-height: 34px;
            font-size: 14px;
          }
          #confirm-btn {
            float: right;
            background: #f03d37;
            border: 1px solid #f03d37;
            color: #fff;
          }
        }
      }
    }
    .cinema-wrap {
      margin-top: 0;
      background-color: #fff;

      .list-wrap {
        background-color: #fff;

        .item {
          padding: 13px 15px 13px 0;
          margin-left: 15px;
          background-color: #fff;
          position: relative;
          overflow: hidden;

          .title-wrap {
            line-height: 1.5;
            .title-block {
              display: flex;

              .title {
                -webkit-box-flex: 1;
                flex: 1;
                height: 23px;
                line-height: 23px;
                font-size: 16px;
                color: #000;
              }
              .price-block {
                display: inline-block;
                padding-left: 3px;
                color: #f03d37;

                .price {
                  font-size: 18px;
                }
                .q {
                  padding-left: 3px;
                  font-size: 11px;
                }
              }
            }
            .location-block {
              display: flex;
              -webkit-box-pack: justify;
              justify-content: space-between;
              margin-top: 6px;
              font-size: 13px;
              color: #666;
            }
            .label-block {
              height: 17px;
              line-height: 17px;
              margin-top: 4px;
              margin-bottom: 4px;
              overflow: hidden;
              font-size: 0;
              flex-shrink: 0;

              & > div {
                position: relative;
                display: inline-block;
                padding: 0 3px;
                height: 15px;
                line-height: 15px;
                border-radius: 2px;
                font-size: 12px;
                margin: 0 3px;
                border: 1px solid #000;
              }
              & > div:first-child {
                margin-left: 0;
              }
            }
            .discount-block {
              color: #999;
              margin-bottom: 4px;
              .discount {
                display: flex;
                align-items: center;

                .discount-label {
                  width: 15px;
                  height: 14px;
                }
                .cardPromotionTag {
                  background: url("../assets/images/卡.png");
                  background-size: 100% 100%;
                }

                .discount-label-text {
                  margin-left: 5px;
                  font-size: 11px;
                }
              }
            }
          }
          .recent {
            padding: 0 15px 0 0;
            margin-right: -15px;
            line-height: 1.5;
            font-size: 0;

            .time-line {
              display: inline-block;
              position: relative;
              vertical-align: middle;
              font-size: 12px;
              color: #999;
            }
            .after {
              margin-left: 14px;
              &::before {
                content: "";
                display: block;
                position: absolute;
                height: 15px;
                width: 1px;
                left: -7px;
                background: #e1e1e1;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
.nothing {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  // position: relative;
  // z-index: 999;

  & > img {
    width: 150px;
    height: 150px;
  }
}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 88vh;
  position: fixed;
  bottom: 0px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
.stop {
  overflow: hidden;
}
::v-deep .van-loading {
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 92.5vh;
  position: fixed;
  bottom: 0px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
</style>